/* UNIVERSAL 
---------------------------------------------- */
html{z-index: -1;height: 100%;}
body{margin: 0;background: #000000;/* font-family: 'klavika-web', Arial, Helvetica, sans-serif; *//* overflow-x: hidden; */}
#header{position: absolute;}
img{border: none;}
b{font-weight: 800;padding-right: 9px;}
a{text-decoration: none;}
a:hover {cursor: pointer;}
p{color: white;font-family: 'klavika-web', Arial, Helvetica, sans-serif;line-height: normal;}
h1{margin: 0;padding: 0;font-size: 63px;color: white;padding: 10px 0px;text-transform: uppercase;font-family: "Tungsten A", "Tungsten B";font-style: normal;font-weight: 300;color:#bcae6c;letter-spacing: normal;}
h2{margin: 0;font-size: 45px;font-family: "Tungsten A", "Tungsten B";font-style: normal;font-weight: 300;color:#9d9d9d;letter-spacing: 1px;text-transform: none;}
h3{margin: 0;padding: 0;font-size: 70px;color: white;padding: 10px 0px;text-transform: uppercase;font-family: "Tungsten A", "Tungsten B";font-style: normal;font-weight: 500;letter-spacing: 10px;}
h4{margin: 0;padding: 0;font-size: 34px;color: white;text-transform: uppercase;}
sup{font-size: 10px;vertical-align: super;}
.clearfix{clear: both}
section,article,header,footer,nav,aside,hgroup,figure,figcaption {display: block;padding: 0;margin: 0;}
#mobile-hdr #header {display: none;}
#wrapper{width: 960px;margin: 0 auto;clear: both;}
#wrapped{background: transparent !important;}
.scrolling{position: relative!important;z-index: 1!important;-webkit-overflow-scrolling: touch;/* overflow-x: hidden; */}
.container{margin: 0 auto;width: 960px;}
.bold{font-weight: 800;}
.freeze{overflow-y: hidden;overflow-x: hidden;}

/* GLOBAL
---------------------------------------------- */
#slides-container{background:black;}
.fp-slide{position:relative;}
.cloud{position: fixed;z-index: 10;bottom: 0px;height:100%;pointer-events: none;}
.cloud-2{position: fixed;z-index: 10;bottom: 0px;height:100%;pointer-events: none;}
.active.static{transition: all 0s ease 0s !important;-webkit-transition: all 0s ease 0s !important;}
#parallax {background-color:black;width:100%;   height:300px;overflow:hidden;}
.stx-logo{background: url("../images/nav-logo.jpg")no-repeat center top;-webkit-background-size: contain;-moz-background-size: contain;-o-background-size: contain;background-size: contain;width: 48.5px;height:48.5px;position: fixed;z-index: 999;top: 0px;left: 50px;opacity: 0.4;transition: all 0.3s ease 0s;-webkit-transition: all 0.3s ease 0s;}
.stx-logo:hover{opacity: 1;cursor: pointer;}
.rotate{display:none;color:red;background:black;z-index: 9999;position:fixed;width:100%;height:100%;text-align: center;padding-top:35%;}
.rotate img{margin:0 auto;display:block;width:150px;margin-top:3%;}
.secondary-btn{margin-right:0px !important;}
.link{position: absolute;background: #101010;padding: 12px;left: 120px;opacity: 0.8;text-decoration: none;z-index: 999;text-transform: uppercase;font-family: "Tungsten A", "Tungsten B";font-style: normal;font-weight: 300;font-size: 26px;letter-spacing: 1px;color: #ccc;line-height: normal;}
.link:hover{cursor:pointer;opacity: 1;text-decoration: none;}
.link-two{position: absolute;background: #101010;padding: 12px;left: 120px;opacity: 0.8;text-decoration: none;z-index: 999;text-transform: uppercase;font-family: "Tungsten A", "Tungsten B";font-style: normal;font-weight: 300;font-size: 26px;letter-spacing: 1px;color: #ccc;line-height: normal;}
.link-two:hover{cursor:pointer;opacity: 1;text-decoration: none;}
.restart-logo{position: absolute;left: 0;right: 0;margin: 0 auto;bottom: 12%;display: block;text-align: center;opacity: 0.2;text-decoration: none;width:32px;height:30px;background: url("../images/restart-logo.png")no-repeat center top;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;margin-bottom:10px;z-index:999;}
.restart-logo:hover{cursor: pointer;opacity: 0.7 !important;}
.restart{position: absolute;left: 0;right: 0;margin: 0 auto;bottom: 10%;display: block;text-align: center;opacity: 0.2;text-decoration: none;width:130px;z-index:999;color:#ccc;}
.restart:hover {cursor: pointer;text-decoration: none;}
#load{width:100%;height:100%;position:fixed;z-index:999;background:url("http://www.stx.com/hammer-500-lacrosse-head/images/loading-gif.gif") no-repeat center center rgba(0,0,0,1)}

/* VIDEO DIV
---------------------------------------------- */
.fullscreen-bg-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.25;
    overflow: hidden;
}
.fullscreen-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media (min-aspect-ratio: 16/9) {
	.fullscreen-bg-video {
    	width: 100%;
		height: auto;
	}
}
@media (max-aspect-ratio: 16/9) {
	.fullscreen-bg-video {
    	width: auto;
		height: 100%;
	}
}
@media (max-width: 767px) {
	.fullscreen-bg-video {
		display: none;
	}
}

/* INTRO
---------------------------------------------- */
/* initial positioning */
.intro{
	background: url("../images/intro-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.intro .title{
    margin: 0;
    padding: 0;
    font-size: 233px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: "Tungsten A", "Tungsten B";
    font-style: normal;
    font-weight: 800;
    color: #bcae6c;
    top: 7%;
    width: 100%;
    z-index: 1;
    opacity: 0.4;
    text-shadow: none;
}
.intro img{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    z-index: 2;
}
.intro p{
	color: white;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    width: 90%;
    margin: 0 auto;
	/* text-shadow: 2px 2px 1px #000000; */
	text-shadow: 2px 2px 1px #000000, 2px 2px 1px #000000, 2px 2px 0px #000000, 2px 2px 0px #989898;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    opacity: 0.7;
    line-height: 1;
}
.intro .desktop{
	display:inline;
}
.intro .mobile{
	display:none;
}
.intro h1 {
    text-align: center;
    bottom: 15%;
    position: absolute;
    left: 0;
    right: 0;
    width: 90%;
    margin: 0 auto;
    text-shadow: 2px 2px 4px #000000;
}
.intro h2 {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    width: 90%;
    max-width: 1530px;
    margin: 0 auto;
    text-shadow: 2px 2px 4px #000000;
}
/* key down */
.scroll-icon-key{
	position:absolute;
	left:0px;
	right:0px;
	margin: 0 auto;
	width:58px;
	height:37px;
	left:20px;
}
.scroll-icon-key img{
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom:0px;
}
@-moz-keyframes fade {
  0%, 20%, 50%, 80%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes fade {
   0%, 20%, 50%, 80%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes fade {
   0%, 20%, 50%, 80%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.scroll-icon-key .mouse-wheel{
	-moz-animation: fade 1.8s infinite;
	-webkit-animation: fade 1.8s infinite;
	animation: fade 1.8s infinite;
}
/* mouse wheel */
.scroll-icon{
	position:absolute;
	left:0px;
	right:0px;
	margin: 0 auto;
	width:36px;
	height:38px;
	left:-110px;
}
.scroll-icon img{
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom:0px;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(12px);
    transform: translateY(12px);
  }
  60% {
    -moz-transform: translateY(5px);
    transform: translateY(5px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
  }
  60% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(12px);
    -ms-transform: translateY(12px);
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
  }
  60% {
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
}
.scroll-icon .mouse-wheel{
	bottom: 2px;
	-moz-animation: bounce 1.8s infinite;
	-webkit-animation: bounce 1.8s infinite;
	animation: bounce 1.8s infinite;
}
.gradient-overlay{
	position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 3;
    background: url("../images/gradient.png")center bottom;
    background-repeat:repeat-x;
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    bottom: 0px;
}

/* DATE
---------------------------------------------- */
.date h1{
	text-align: center;
    font-size: 413px !important;
    position: relative;
    margin-top:17%;
}
.twenty-fifteen-smoke{
	background: url("../images/twenty-fifteen-smoke.png")no-repeat center center;
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    width:100%;
    height:100%;
    position:absolute;	
}
.twenty-sixteen-smoke{
	background: url("../images/twenty-sixteen-smoke.png")no-repeat center center;
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    width:100%;
    height:100%;
    position:absolute;	
}

/* STANDARD
---------------------------------------------- */
/* backgrounds */
#three{
	background: url("../images/wimbledon-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 0;
	transition: all  1s ease 0s;
    -webkit-transition: all  1s ease 0s;
}
/* initial positioning */
.standard.intermediate  .copy{
    text-align: center;
    bottom: 8%;
    right: 5%;
    top: 4%;
    text-align: left;
    position: absolute;
    max-width: 640px;
    width: 50%;
    transition: transform 1s cubic-bezier(0.5, 0.68, 0.43, 0.99),opacity 1s ease-in-out;
    transform: translateX(0) translateY(0);
    transform: translateY(-1000px);
}
.standard.final  .copy{
    text-align: center;
    top: 4%;
    right: 5%;
    text-align: left;
    position: absolute;
    max-width: 640px;
    width: 50%;
}
.standard h1{
	font-size:98px;
}
.standard h2{
	font-size:42px;
}
.standard img{
    position: absolute;
    left: 0px;
    bottom:0px;
    z-index: 3;
}
/* active positioning */
.active.standard.static{
	transition: all 0s ease 0s !important;
    -webkit-transition: all 0s ease 0s !important;
}
.active#three{
	opacity: 1;
}
.active.standard.intermediate .copy{
    transform: translateY(0px);
    transition-delay: 0.5s;
}
.active.standard img{
    transform: rotate(0deg);
    transition-delay: 0.7s;
    bottom: 0px;
    left: 0px;
    opacity: 1;
}

/* USA
---------------------------------------------- */
/* initial positioning */
.usa{
	background: url("../images/usa-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.usa .copy{
    text-align: center;
    bottom: 8%;
    right: 5%;
    text-align: left;
    position: absolute;
    max-width: 640px;
    width: 50%;
    transition: transform 1s cubic-bezier(0.5, 0.68, 0.43, 0.99),opacity 1s ease-in-out;
    transform: translateX(0) translateY(0);
    transform: translateY(1000px);
}
.usa.final .copy{
    text-align: center;
    bottom: 8%;
    right: 5%;
    text-align: left;
    position: absolute;
    max-width: 640px;
    width: 50%;
    transform: translateY(0px);
}
.usa h1{
	font-size:98px;
}
.usa h2{
	font-size:42px;
}
.player-1{
	z-index: 2;
}
.usa img{
    position: absolute;
    left: 0px;
	bottom:0px;
}
.usa-logo{
	left: -14vw !important;
    bottom: 2vw !important;
    width: 13vw;
}
/* active positioning */
.active.usa{
	opacity: 1;
}
.active.usa .copy{
    transform: translateY(0px);
    text-align: center;
    bottom: 8%;
    right: 5%;
    text-align: left;
    position: absolute;
    max-width: 640px;
    width: 50%;
    transform: translateY(0px);
    transition-delay: 0s;
}
.active.usa img{
	opacity: 1;
}

/* SPLIT
---------------------------------------------- */
/* initial positioning */
.split {
	opacity: 1 !important;
}
.split img{
	position: absolute;
	left:0px;
    width:100%;
}
.split .top{
	background-image: url("../images/test-top.png");
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top center;
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	z-index: 6;
}
.split .bottom{
	background-image: url("../images/test-bottom.png");
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top center;
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	bottom:0px;
	z-index: 6;
}
.split-container{
	position:relative;
	height:100%;
	width:100%;
	z-index: 6;
}
/* active positioning */
.split.active .top{
	transform: translateY(0px);
    transition-delay: 0.5s;
    top:0px;
}
.split.active .bottom{
	transform: translateY(0px);
    transition-delay: 0.5s;
	bottom:0px;
}

/* SCHOOL REVEALING
---------------------------------------------- */
/* maryland slide */
.reveal.maryland{
    background-image: url("../images/maryland-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    top: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 4;
}
.split .maryland-logo{
    width: 209px !important;
    z-index: 5;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 30%;
}
.slide.reveal.maryland.fp-slide.fp-table.active{
	top:0px;
}
.split .left-stick{
	z-index: 2;
}
.split .left-stick{
	max-width:1500px;
	left:0;
	right:0;
	margin: 0 auto;
}
.split .right-stick{
	max-width:1500px;
	left:0;
	right:0;
	margin: 0 auto;
}
/* duke slide */
.reveal.duke{
    background-image: url("../images/duke-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    top: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
}
.slide.reveal.duke.fp-slide.fp-table.active{
	top:0px;
}
/* boston slide */
.reveal.boston{
    background-image: url("../images/boston-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    top: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}
.slide.reveal.boston.fp-slide.fp-table.active{
	top:0px;
}
/* general slide styles */
.reveal h1 {
    text-align: center;
    top: 56%;
    position: absolute;
    left: 0;
    right: 0;
    width: 80%;
    margin: 0 auto;
    z-index: 2;
}
.reveal h2 {
    text-align: center;
    top: 65%;
    position: absolute;
    left: 0;
    right: 0;
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    z-index: 2;
}
.reveal.boston h2{
	bottom:10%;
}
/* slide animating classes added in scripts.js */
.slide-up.active {
	top:0px !important;
}
.slide-up{
	top:-1000px !important;
}

/* STANDARD-REVERSED
---------------------------------------------- */
/* backgrounds */
#ten{
	background: url("../images/and-again-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 0;
	transition: all  1s ease 0s;
    -webkit-transition: all  1s ease 0s;
}
/* initial positioning */
.standard-reversed .copy{
    text-align: center;
    top: 4%;
    left: 5%;
    text-align: left;
    position: absolute;
    max-width: 460px;
    width: 50%;
    transition: transform 1s cubic-bezier(0.5, 0.68, 0.43, 0.99),opacity 1s ease-in-out;
    transform: translateX(0) translateY(0);
    transform: translateY(-500px);
}
.standard-reversed h1{
	font-size:98px;
}
.standard-reversed h2{
	font-size:42px;
}
.standard-reversed img{
    position: absolute;
    right: 0px;
    bottom: 0px;
}
/* active positioning */
.active#ten{
	opacity: 1;
}
.active.standard-reversed .copy{
	transform: translateX(0);
	opacity: 1;
	transition-delay: 0.7s;
}
.active.standard-reversed img{
	transform: translateX(0px);
    transition-delay: 0.7s;
    bottom: 0px;
}

/* LEADERBOARD
---------------------------------------------- */
/* backgrounds */
#eleven{
	background: url("../images/leaderboard-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 0;
	transition: all  1s ease 0s;
    -webkit-transition: all  1s ease 0s;
}
/* initial positioning */
.leaderboard .copy{
    text-align: center;
    top: 4%;
    left: 12%;
    text-align: center;
    position: absolute;
    max-width: 755px;
    width: 50%;
}
.leaderboard h1{
	font-size:98px;
}
.leaderboard h2{
	font-size:42px;
}
/* active positioning */
.active#eleven{
	opacity: 1;
}
.active.leaderboard .copy{
	transform: translateX(0);
	opacity: 1;
	transition-delay: 0.7s;
}
.active.leaderboard .board{
	transform: translateY(0px);
    transition-delay: 0.7s;
    top:30%;
}
/* board */
.leaderboard-bg{
	position: absolute;
    top: -21%;
    left: -182px;
    z-index: 1;
}
.leaderboard .board{
	display: block;
    max-width: 64%;
    margin: 0 auto;
	position: relative;
	top:310px;
}
.leaderboard .board-wrap{
	display: block;
    left: 12%;
    max-width: 755px;
    width: 50%;
    position: absolute;
    left: 12%;
    top: 6%;
    height: 100%;
}
.leaderboard .board img{
    display: inline-block;
    float: left;
    margin: 12px;
    position: absolute;
}
.leaderboard .board p{
    display: inline-block;
    text-transform: uppercase;
    font-size: 30px;
    color: #ffffff;
    font-family: "Tungsten A", "Tungsten B";
    font-style: normal;
    font-weight: 300;
    letter-spacing: 1px;
    text-align: center;
    width: 96%;
    margin: 15px;
    line-height: 1;
}
.leaderboard .board span{
	display: inline-block;
    text-transform: uppercase;
    font-size: 30px;
    color: #ffffff;
    font-family: "Tungsten A", "Tungsten B";
    font-style: normal;
    font-weight: 300;
    letter-spacing: 1px;
    text-align: center;
    padding: 15px 30px;
    border-left: 1px solid #89867b;
    float: left;
    width: 10px;
    position: absolute;
    top: 0px;
    right: 0px;
    line-height: 1;
    box-sizing: content-box;
}
.leaderboard .board .row{
    border-left: 1px solid #767367;
    border-right: 1px solid #767367;
    border-bottom: 1px solid #767367;
    background: #2e2e2e;
    display: block;
    width: 100%;
    z-index: 2;
    position: relative;
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(35,35,35,1);
	-moz-box-shadow: inset 0px 0px 0px 1px rgba(35,35,35,1);
	box-shadow: inset 0px 0px 0px 1px rgba(35,35,35,1);
}
.leaderboard .board .row:first-of-type{
    border-top: 1px solid #767367;	
}
.usa-board{
    background:#bbb694!important;
    top:0px;
}
.leaderboard .board .usa-board p{
    color:#000000;	
}
.transition{
	transition: all  2s ease 2s;
    -webkit-transition: all  2s ease 2s;
}
/* board transition class added in js*/
.germany-board.active{
	margin-top:60px;
}
.usa-board.active{
	position: relative;
    top: -243px;
}

/* INDOOR CHAMPIONS
---------------------------------------------- */
/* backgrounds */
#twelve{
	background: url("../images/indoor-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 0;
	transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
}
/* initial positioning */
.indoor .copy{
    text-align: center;
    top: 4%;
    right: 5%;
    text-align: left;
    position: absolute;
    max-width: 640px;
    width: 50%;
    transition: transform 1s cubic-bezier(0.5, 0.68, 0.43, 0.99),opacity 1s ease-in-out;
    transform: translateX(0) translateY(0);
    transform: translateY(-500px);
}
.indoor h1{
	font-size:98px;
}
.indoor h2{
	font-size:42px;
}
.indoor img{
    position: absolute;
    left: 0px;
    transition: transform 1s cubic-bezier(0.5, 0.68, 0.43, 0.99),opacity 1s ease-in-out;
    transform: translateX(0) translateY(0);
    transform: translateY(800px);
}
/* active positioning */
.active#twelve{
	opacity: 1;
}
.active.indoor .copy{
	transform: translateX(0);
	opacity: 1;
	transition-delay: 0.7s;
}
.active.indoor img{
	transform: translateY(0px);
    transition-delay: 0.7s;
    bottom: 0px;
}

/* HOCKEY-CHAMPIONS
---------------------------------------------- */
/* initial positioning */
.hockey-champions{
	background: url("../images/hockey-champions-bg-bw.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.hockey-champions .bg-color-overlay{
	position:absolute;
	z-index: 2;
	width: 100%;
	height:100%;
	background: url("../images/hockey-champions-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.hockey-champions .logo{
    position: absolute;
    bottom: 38%;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    z-index: 4;
}
.hockey-champions .debris{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    width:100%;
    z-index: 3;
}
.hockey-champions h1 {
    text-align: center;
    bottom: 26%;
    position: absolute;
    left: 0;
    right: 0;
    width: 80%;
    margin: 0 auto;
    font-size: 98px;
    letter-spacing: 4px;
    opacity: 0;
    z-index: 4;
}
.hockey-champions h2 {
    text-align: center;
    bottom: 8%;
    position: absolute;
    left: 0;
    right: 0;
    width: 80%;
    max-width: 1100px;
    margin: 0 auto;
    opacity: 0;
    z-index: 4;
}
/* active positioning */
.active.hockey-champions{
	opacity: 1;
}
.hockey-champions.active h1 {
	transform: translateX(0);
	opacity: 1;
	transition-delay: 1s;
}
.hockey-champions.active h2 {
	transform: translateX(0);
	opacity: 1;
	transition-delay: 1s;
}
.hockey-champions.active .debris {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 1s;
}
.hockey-champions.active .logo {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 0.8s;
}

/* MAP
---------------------------------------------- */
/* initial positioning */
.map .bg{
    width: 70%;
    position: absolute;
    margin: auto;
	position: absolute;
	top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0;
}
.map .bg.border{
    transform: scale(1.03,1.05);
	-ms-transform: scale(1.03,1.05);
    -webkit-transform: scale(1.03,1.05);
}
.map .overlay{
	background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
}
.map .overlay img{
	position: absolute;
    width: 250px;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 49%;
}
.map .overlay h2{
	position: absolute;
	max-width:680px;
    width: 80%;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 26%;
    text-align: center;
}
.path img{
	width:100%;
}
.map .team-usa{
  z-index:2;
}
.shona{
  z-index:2;
}
.jeroen{
   z-index:2;
}
.rio{
  z-index:2;
}
.map-desktop{
	display:block;
}
.map-mobile{
	display:none;
}

/* CONTINUES
---------------------------------------------- */
/* backgrounds */
#eighteen{
	background: url("../images/continues-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 0;
	transition: all  1s ease 0s;
    -webkit-transition: all  1s ease 0s;
}
/* initial positioning */
.continues h1{
	font-size:99px;
	text-align: center;
    position: relative;
}
.continues h2{
    font-size: 42px;
    text-align: center;
    max-width: 600px;
    width: 80%;
    margin: 0 auto;
    position: relative;
    line-height: 60px;
    margin-top: 20px;
}
.continues .copy{
	position: absolute;
    left: 0;
    right: 0;
    bottom: 40%;
}

/* PLAY-HUGE
---------------------------------------------- */
/* initial positioning */
.play-huge img{
    position: absolute;
    left: 0;
    top: 0px;
    right: 0;
    margin: 0 auto;
    max-width: 1346px;
    width: 95%;
    pointer-events: none;
}
.play-huge .buttons{
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30%;
}
.play-huge .buttons a{
	text-decoration: none;
    font-size: 33px;
    border: 1px solid #616269;
    padding: 10px 13px;
    margin-right: 30px;
    color:#ccc;
}
.play-huge .buttons a:hover{
	cursor: pointer;
	background:#616269;
	color:black;
}
/* active positioning */
.active.play-huge img{
	opacity: 1;
}
.active.play-huge .buttons{
	opacity: 1;
}

/* PLAYERS
---------------------------------------------- */
.player .text{
	position: relative;
    display: block;
    width: 400px;
    top: 12%;
    left: 12%;
    z-index: 5;
}
.player h1{
	font-size: 177px;
    letter-spacing: 5px;
}
.player h3{
    position: relative;
    top: -33px;
    left: 52px;
}
.player .text h2{
	font-size: 24px;
    position: absolute;
    top: 142px;
    color: white;
    left: 369px;
    width: 100%;
    letter-spacing: 2px;
}
.player .text .name p{
	position: absolute;
    top: 133px;
    left: 374px;
    width: 100%;
    font-weight: 100;
    text-transform: capitalize;
}
.player .text p{
	margin: 0;
    padding: 0;
    font-size: 22px;
    color: white;
    padding: 10px 0px;
    text-transform: uppercase;
    font-family: "Tungsten A", "Tungsten B";
    font-style: normal;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 3px;
    position: relative;
    left: 54px;
    bottom: 14px;
}
.player .text .quote h2{
	font-size: 42px;
    line-height: 60px;
    left: 52px;
    position: relative;
    color: #dfdfdf;
    top:0px;
}
.player .text .quote span{
	font-size: 77px;
    padding: 10px 0px;
    text-transform: uppercase;
    font-family: "Tungsten A", "Tungsten B";
    font-style: normal;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 3px;
    position: relative;
    left: 52px;
    bottom: 14px;
}
.player .text .quote span:first-child{
	position: absolute;
    left: 10px;
    bottom: 45px;
}
.player .text .quote span:last-of-type{
    position: absolute;
    left: 460px;
    bottom: 45px;
}
.player .text .quote{
	top: 30px;
    position: relative;
    z-index: 2;
}
.player .text img{
	position: absolute;
    bottom: -234px;
    left: -33px;
    z-index: 1;
}
.jeroen-hero{
	position:absolute;
	width:100%;
	height:100%;
	background: url("../images/jeroen-bg-bw.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 2;
}
.jeroen-hero .bg-color-overlay{
	position:absolute;
	width:100%;
	height:100%;
	background: url("../images/jeroen-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 3;
}
.katie-hero{
	position:absolute;
	width:100%;
	height:100%;
	background: url("../images/katie-bg-bw.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 1;
}
.katie-hero .bg-color-overlay{
	position:absolute;
	width:100%;
	height:100%;
	background: url("../images/katie-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 3;
}
.shona-hero{
	position:absolute;
	width:100%;
	height:100%;
	background: url("../images/shona-bg-bw.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.shona-hero .bg-color-overlay{
	position:absolute;
	width:100%;
	height:100%;
	background: url("../images/shona-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 3;
}
.katie-hero .text .name h3{
	top:0px;
	left:0px;
}
.katie-hero .text .name h1{
    bottom: 30px;
    position: relative;
    left: 43px;
}
.katie-hero .text .name p{
    top: 43px;
    left: 160px;
}
.player .katie-hero .text img{
	bottom: -174px;
}
.player .katie-hero .text .quote span:first-child{
	bottom:108px;
}
.player .katie-hero .text .quote span:last-of-type{
	bottom:108px;
}
.shona-hero .text .name p{
    top: 172px;
    left: 330px;
}
.player .shona-hero .text img{
	bottom: -178px;
}
.player .shona-hero .text .quote span:first-child{
	bottom:110px;
}
.player .shona-hero .text .quote span:last-of-type{
	bottom:110px;
}

/* MEDIA QUERIES
---------------------------------------------- */
/* Portrait */
@media screen and (max-width:768px) {
	.rotate{
		display:block;
	}
}
@media screen and (min-width:320px) and (max-width:768px) and (orientation:landscape) {
	.rotate{
		display:none;
	}
}
/* Width */
@media only screen and (max-width: 1650px){
	.intro h1{
		font-size: 4vw;
	}
	.intro h2{
		font-size: 2.8vw;
	}
	.standard h1 {
	    font-size: 6vw;
	}
	.standard h2{
	    font-size: 3vw;
	}
	.usa h1 {
	    font-size: 6vw;
	}
	.usa h2{
	    font-size: 3vw;
	}
	.usa-logo {
	    bottom: 6vw !important;
	}
	.reveal h1 {
	    font-size: 6vw;
	    top: 54%;
	}
	.reveal h2{
	    font-size: 3vw;
	}
	.split .maryland-logo{
		width:11vw !important;
	}
	.standard-reversed h1 {
	    font-size: 6vw;
	}
	.standard-reversed h2{
	    font-size: 3vw;
	}
	.leaderboard h1 {
	    font-size: 6vw;
	}
	.leaderboard h2{
	    font-size: 2.6vw;
	}
	.leaderboard .board{
		top:20vw;
	}
	.leaderboard .board p{
		font-size:2vw;
	}
	.leaderboard .board span{
	    font-size: 2vw;
	    height: 100%;
	    padding: 0px 5%;
	    line-height: 4vw;
	}
	.leaderboard .board img{
		width:44px;
	}
	.hockey-champions h1 {
	    font-size: 6vw;
	}
	.hockey-champions h2{
	    font-size: 3vw;
	}
	.hockey-champions h2{
		bottom:3vw;
	}
	.hockey-champions h1{
		bottom:15vw;
	}
	.hockey-champions .logo{
		bottom:24vw;
		width:70px;
	}
	.continues h2{
	    font-size: 3vw;
	    margin-top:0px;
	    line-height:3.5vw;
	}
	.continues h1 {
	    font-size: 6vw;
	}
	.leaderboard .board img {
	    display: inline-block;
	    float: left;
	    margin: 12px;
	    position: absolute;
	}
	.leaderboard-bg {
	    position: absolute;
	    top: -4.7vw;
	    left: -11vw;
	    z-index: 1;
	    width: 160% !important;
	}
}
@media only screen and (max-width: 1580px){
	.usa .player-1{
		width:50%;
	}
	.usa .player-2{
		width:50%;
	}
}
@media only screen and (max-width: 1500px){
	#slide-9.standard img{
	    width: 1000px;
	    left: -343px !important;
	    bottom: -340px !important;
	}
}
@media only screen and (max-width: 1477px){
	.hockey-champions h2 {
	    bottom: 4vw;
	}
}
@media only screen and (max-width: 1340px){
	.intro .main-intro-img{
		width:100%;
	}
	.intro .title{
		font-size:16vw;
	}
	.usa img{
		width:60%;
	}
	.usa-logo {
	    bottom: 14vw !important;
	    left: 0vw !important;
	    width: 14vw !important;
	}
}
@media only screen and (max-width: 1240px){
	.standard img{
	    width: 800px;
	    left: -370px !important;
	    bottom: -280px !important;
	}
	.standard-reversed img{
		width:50%;
	}
	.leaderboard .board span{
		line-height: 5vw;
	}
}
@media only screen and (max-width: 1050px){
	.leaderboard .board img{
		width:40px;
	}
	.standard img {
	    width: 500px;
	    left: -230px !important;
	    bottom: -170px !important;
	}
}
@media only screen and (max-width: 1024px){
	.map-desktop{
		display:none;
	}
	.map-mobile{
		display:block;
	}
	#slide-9.standard img{
	    width: 800px;
	    left: -270px !important;
	    bottom: -270px !important;
	}
}
@media only screen and (max-width: 1050px){
	.play-huge .buttons a{
		font-size:14px;
	}
	.play-huge .buttons{
		bottom:30%;
	}
	.restart-logo{
		width: 20px;
		height: 18px;
	}
	.play-huge img{
		width:80%;
	}
}
@media only screen and (max-width: 880px){
	h1{
		font-size: 6vw;
	}
	h2 {
	    font-size: 3vw;
	}
	.map .overlay img{
		width:150px;
	}
	.player h1{
		font-size: 20vw;
	}
	.player h3{
		font-size: 8vw;
	}
	.player .text .name p{
		font-size:2vw;
		top: 16vw;
		left: 43vw;
	}
	.katie-hero .text .name p{
	    font-size: 2vw;
	    top: 5vw;
	    left: 19vw;
	}
	.shona-hero .text .name p{
		font-size: 2vw;
	    top: 19.4vw;
	    left: 37vw;
	}
	.shona-hero h3{
		font-size: 7vw;
		left: 6vw;
	}
	.player .text p{
		font-size:2.5vw;
	}
	.player .text .quote h2{
		font-size:2.5em;
	}
}
@media only screen and (max-width: 768px){
	.scroll-icon-key{
		display:none;
	}
	.scroll-icon{
		left:0px !important;
	}
	.intro .desktop{
		display:none;
	}
	.intro .mobile{
		display:inline;
	}
}
@media only screen and (max-width: 725px){
	#slide-9.standard img {
	    width: 650px;
	    left: -225px !important;
	    bottom: -225px !important;
	}
	#slide-7 .caption{
		top:10%!important;
	}
}
@media only screen and (max-width: 710px){
	.intro .title{
		font-size:90px;
	}
}
@media only screen and (max-width: 500px){
	.intro .title{
		font-size:70px;
	}
}
@media only screen and (max-width: 420px){
	.intro .title{
		font-size:60px;
	}
}
/* Height */
@media screen and (max-height:620px) and (max-width:1200px) {
	.intro .main-intro-img{
		width:80%;
	}
}
@media screen and (max-height:700px){
	#slide-8 .caption{
		width:40% !important;
		display: inline-block !important;
	    position: relative !important;
	    float: left !important;
	    top:27vh!important;
	    text-align: left !important;
	}
	.leaderboard .board-wrap{
		display: inline-block !important;
	    float: left !important;
	    position: relative !important;
	    top: 0px !important;
	}
	.leaderboard .board {
	    top: 15vh !important;
	}
	.leaderboard .board img{
		width:30px;
		margin: 8px;
	}
	.leaderboard .board p{
		margin:10px;
	}
	.reveal h2{
		top:67%;
	}
}
@media screen and (max-height:670px){
	.player .text{
		top:-24px;
		left:0px;
	    transform: scale(0.6);
		-ms-transform: scale(0.6);
	    -webkit-transform: scale(0.6);
	}
	.shona-hero .text{
		top:-20px;
	}
	.stx-logo{
		height:35px;
		width:35px;
	}
	.link{
		font-size:20px;
		padding:8px;
		left:97px;
	}
	.link-two{
		font-size:20px;
		padding:8px;
	}
	#slide-4 .link-two{
		left:260px !important;
	}
	#slide-5 .link-two {
	    left: 213px !important;
	}
}
@media screen and (max-height:390px){
	.reveal h2{
		top:70%;
	}
	.leaderboard .board {
	    top: 8vh !important;
	}
	#slide-8 .caption{
		top:20vh!important;
	}
	.shona-hero .text {
	    top: -60px;
	}
	.player .text {
    	top: -60px;
    }
	.player .text{
		transform: scale(0.55);
	    -ms-transform: scale(0.55);
	    -webkit-transform: scale(0.55);
	}
}
@media screen and (max-height:500px){
	.play-huge .buttons a {
	    font-size: 10px;
	}
}
@media screen and (max-height:315px){
	.leaderboard .board {
	    top: 5vh !important;
	}
}

/* INIT SKROLLR AND CUSTOM SKROLLR CSS FOR SLIDES
---------------------------------------------- */
/*    Chrome Frame prompt */
.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
html, body {
    width:100%;
    height:100%;
    background:black;
}
/* full width/height container */
#slides-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* double the height/width of a viewport */
#slides {
    width: 200%;
    height: 200%;
    position: fixed;
    top: 0;
    left: 0;
}
.slide {
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:50%;
}
#slide-1 {
	background: url("../images/intro-bg.jpg")no-repeat right top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transform: translate(-100%,100%);
    -ms-transform: translate(-100%,100%);
    transform: translate(-100%,100%);
}
#slide-1 .caption{
	bottom: 15%;
    position: absolute;
    width: 100%;
    z-index: 3;
}
#slide-2 {
	background: url("../images/twenty-fifteen-bg.png")no-repeat center center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transform: translate(0,100%);
    -ms-transform: translate(0,100%);
    transform: translate(0,100%);
}
#slide-3 {
   	background: url("../images/wimbledon-1-bg-bw.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transform: translate(100%,100%);
    -ms-transform: translate(100%,100%);
    transform: translate(100%,100%);
}
#slide-3 .bg-color-overlay{
   	background: url("../images/wimbledon-1-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	position:absolute;
	width:100%;
	height:100%;
}
#slide-3 .caption{
	right: 5%;
    top: 4%;
    text-align: left;
    position: absolute;
    max-width: 640px;
    width: 50%;
}
#slide-4 {
    background: url("../images/usa-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transform: translate(200%,100%);
    -ms-transform: translate(200%,100%);
    transform: translate(200%,100%);
}
#slide-4 .link-two{
	left: 335px;
}
#slide-4 .caption {
    bottom: 8%;
    right: 5%;
    text-align: left;
    position: absolute;
    max-width: 640px;
    width: 50%;
}
#slide-5 {
    -webkit-transform: translate(300%,100%);
    -ms-transform: translate(300%,100%);
    transform: translate(300%,100%);
}
#slide-5 .link-two{
	left:270px;
}
#slide-6 {
	background: url("../images/twenty-sixteen.png")no-repeat center center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transform: translate(400%,100%);
    -ms-transform: translate(400%,100%);
    transform: translate(400%,100%);
}
#slide-7 {
	background: url("../images/and-again-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transform: translate(500%,100%);
    -ms-transform: translate(500%,100%);
    transform: translate(500%,100%);
}
#slide-7 .caption{
    top: 4%;
    left: 5%;
    text-align: left;
    position: absolute;
    max-width: 460px;
    width: 50%;
}
#slide-7 img{
	position: absolute;
    right: 0px!important;
    bottom: 0px;
}
#slide-8 {
	background: url("../images/leaderboard-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transform: translate(600%,100%);
    -ms-transform: translate(600%,100%);
    transform: translate(600%,100%);
}
#slide-8 .caption{
	text-align: center;
    top: 4%;
    left: 12%;
    text-align: center;
    position: absolute;
    max-width: 755px;
    width: 50%;
}
#slide-9 {
   	background: url("../images/indoor-bg-bw.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transform: translate(700%,100%);
    -ms-transform: translate(700%,100%);
    transform: translate(700%,100%);
}
#slide-9 .bg-color-overlay{
   	background: url("../images/indoor-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}
#slide-9 .caption{
	right: 5%;
    top: 4%;
    text-align: left;
    position: absolute;
    max-width: 640px;
    width: 50%;
    z-index: 3;
}
#slide-10 {
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transform: translate(800%,100%);
    -ms-transform: translate(800%,100%);
    transform: translate(800%,100%);
}
#slide-11 {
	background: url("../images/main-map-bg.jpg")no-repeat center center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transform: translate(900%,100%);
    -ms-transform: translate(900%,100%);
    transform: translate(900%,100%);
}
#slide-12 {
    -webkit-transform: translate(1000%,100%);
    -ms-transform: translate(1000%,100%);
    transform: translate(1000%,100%);
}
#slide-13 {
    -webkit-transform: translate(1100%,100%);
    -ms-transform: translate(1100%,100%);
    transform: translate(1100%,100%);
}
#slide-14 {
    -webkit-transform: translate(1200%,100%);
    -ms-transform: translate(1200%,100%);
    transform: translate(1200%,100%);
}
.continues-bg{
	position:absolute;
	width:100%;
	height:100%;
	background: url("../images/continues-bg.jpg")no-repeat center top;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#helper {
    position:absolute;
    left:0;
    top: 0;
    height:600%;
    width: 0;
}
.marker {
    height: 25%;
    width: 100%;
}
/* FOLLOWING IS PART OF SKROLLR DO NOT EDIT
---------------------------------------------- */
/* Helper classes.*/
/** Image replacement*/
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}
.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}
.hidden {
    display: none !important;
    visibility: hidden;
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
/** Extends the .visuallyhidden class to allow the element to be focusable* when navigated to via the keyboard */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
.invisible {
    visibility: hidden;
}
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.clearfix:after {
    clear: both;
}
/** For IE 6/7 only* Include this rule to trigger hasLayout and contain floats.*/
.clearfix {
    *zoom: 1;
}
@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
    #slide-3 .caption,
    #slide-4 .caption {
        text-align: left;
    }
}
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}
@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    /*
     * Don't show links for images, or javascript/internal links
     */
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }
    @page {
        margin: 0.5cm;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}